"""
@author: 高姚霞
@date: 2020-08-03 10:34:31
"""
<!-- 渠道指数页-环状图 -->
<template>
  <div :id="id" :style="{ height:height,width:width }" />
</template>

<script>
import echarts from "echarts";
import selectDateVue from '../../base/selectDate.vue';
export default {
  props: {
    id: {
      type: String,
      default: "chart",
    },
    width: {
      type: String,
      default: "100%",
    },
    height: {
      type: String,
      default: "260px",
    },
    data: {
      type: Array,
      default: () => [],
    },
    title: {
      type: String,
      default: "阅读数占比分析",
    },
    clickFuc: {
      type: Function,
      default: (params) => {},
    },
  },
  data() {
    return {
      chart: null,
      legendOne: [],
      legendTwo: [],
    };
  },
  mounted() {
    this.getlegendData();
    this.$nextTick(() =>{
      this.initChart();
    })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    getlegendData() {
      if (this.data.length === 0) {
        return;
      }
      this.legendOne = [];
      this.legendTwo = [];
      this.data.forEach((item, index) => {
        if (index < 5) {
          this.legendOne.push(item.name);
        } else {
          this.legendTwo.push(item.name);
        }
      });
    },
    initChart() {
      this.chart = echarts.init(document.getElementById(this.id));
      const option = {
        title: {
          text: this.title,
          left: "center",
          top: "55%",
          textStyle: {
            fontSize: 14,
            fontWeight: 400,
          },
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b}: {c} ({d}%)",
        },
        legend: [
          {
            type: "scroll",
            x: "52%",
            top: "38%",
            textStyle: {
              //图例文字的样式
              fontSize: 14,
            },
            itemWidth: 12,
            itemHeight: 12,
            itemGap: 20,
            data: this.legendOne,
          },
          {
            type: "scroll",
            x: "52%",
            top: "50%",
            textStyle: {
              //图例文字的样式
              fontSize: 14,
            },
            itemWidth: 12,
            itemHeight: 12,
            itemGap: 20,
            data: this.legendTwo,
          },
        ],
        series: [
          {
            name: "占比分析",
            type: "pie",
            roseType: "area",
            center: ["40%", "50%"],
            radius: [44, 120],
            clockwise: false, //饼图的扇区是否是顺时针排布
            avoidLabelOverlap: false,
            selectedMode: "single", //选中模式，表示是否支持多个选中，默认关闭，支持布尔值和字符串，字符串取值可选'single'，'multiple'，分别表示单选还是多选。
            selectedOffset: 0,
            label: {
              normal: {
                show: false,
                position: "outter",
                formatter: " {b}\n{d}%",
              },
            },
            labelLine: {
              show: false,
            },
            data: this.data,
          },
        ],
        color: [
          "#F24D4B",
          "#FF7D3D",
          "#5BDA79",
          "#25F1D8",
          "#F374A1",
          "#FFAD3D",
          "#66BB6A",
          "#1FAFF5",
          "#4B6EF2",
          "#9481F5",
        ],
      };
      this.chart.setOption(option);
      // this.chart.on("click", (params) => {
      //   this.$emit("clickFuc", params);
      //   this.chart.dispatchAction({
      //     type: "highlight",
      //     seriesIndex: params.seriesIndex,
      //     dataIndex: params.dataIndex,
      //   });
      // });
      this.chart.on("click", (params) => this.onClick(params));
    },
    onClick(param) {
      this.$emit("clickFuc", param);
    },
  },
  watch: {
    data: {
      handler(newVal, oldVal){
        console.log("监听：", newVal)
        if(this.chart){
          //销毁
          this.chart.dispose();
          if(newVal){
            this.initChart();
          } 
        } else{
          this.initChart();
        }
      },
      deep: true //对象内部属性的监听
    }
  }
};
</script>
<style lang='stylus' scoped></style>